﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css"/>
    <script language="javascript" type="text/javascript">
        //写入下拉框中的年份和月份
        function initialYearAndMonth() {
            //写入最近3年
            var yearObj = document.getElementById("selYears");
            var year = (new Date()).getFullYear();
            for (var i = 0; i <= 2; i++) {
                var opObj = new Option(year - i, year - i);
                yearObj.options[i] = opObj;
            }
            //写入 12 月
            var monthObj = document.getElementById("selMonths");
            var opObj = new Option("全部", "全部");
            monthObj.options[0] = opObj;
            for (var i = 1; i <= 12; i++) {
                var opObj = new Option(i, i);
                monthObj.options[i] = opObj;
            }
        }
    </script>
</head>
<body onload="initialYearAndMonth();">
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="/logout">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <ul id="menu">
        <li><a href="../index.html" class="index_off"></a></li>
        <li id="lia1"><a href="rolelist" class="role_off"></a></li>
        <li id="lia2"><a href="adminlist" class="admin_off"></a></li>
        <li id="lia3"><a href="fee" class="fee_off"></a></li>
        <li id="lia4"><a href="accountlist" class="account_off"></a></li>
        <li id="lia5"><a href="servicelist" class="service_off"></a></li>
        <li id="lia6"><a href="bill" class="bill_on"></a></li>
        <li id="lia7"><a href="report" class="report_off"></a></li>
        <li><a href="userinfo" class="information_off"></a></li>
        <li><a href="changepsw" class="password_off"></a></li>
    </ul>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="" method="">
        <!--查询-->
        <div class="search_add">
            <div>身份证：<input type="text" value="" class="text_search" id="cardid"/></div>
            <div>账务账号：<input type="text" value="" class="width100 text_search" id="cln"/></div>
            <div>姓名：<input type="text" value="" class="width70 text_search" id="aname"/></div>
            <div>
                <select class="select_search" id="selYears">
                </select>
                年
                <select class="select_search" id="selMonths">
                </select>
                月
            </div>
            <div><input type="button" value="搜索" class="btn_search"/></div>
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <tr>
                    <th class="width50">账单ID</th>
                    <th class="width70">姓名</th>
                    <th class="width150">身份证</th>
                    <th class="width150">账务账号</th>
                    <th>费用</th>
                    <th class="width100">月份</th>
                    <th class="width100">支付方式</th>
                    <th class="width100">支付状态</th>
                    <th class="width50"></th>
                </tr>
                <tbody id="tbody">

                </tbody>
            </table>

            <p>业务说明：<br/>
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br/>
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br/>
                3、年和月的数据由 js 代码自动生成；<br/>
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
        </div>
        <!--分页-->
        <div id="pages">
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司 </p>
</div>
</body>
<script src="../js/jquery-3.2.1.js"></script>
<script>
    function addNewTR(acc, i) {
        var j = parseInt(i) + 1;
        var tr = $("<tr><td>" + acc.accountId + "</td><td>" + acc.realName + "</td><td>" + acc.idcardNo + "</td><td>" +
                acc.loginName + "</td><td>" + '待计算' + "</td><td>" + (acc.createDate) + "</td><td>" +
                '扫码支付' + "</td><td>" + '等待支付' + "</td><td>" +
                "<a href=/bitem?aid="+acc.accountId+" title=账单明细>" + '明细' + "</a></td></tr>")
        var tab = $("#tbody");
        tab.append(tr);
    }
    <!--getAllMessages();-->
    <!--function getAllMessages() {-->
        <!--$.ajax({-->
            <!--url: "/allbill",-->
            <!--type: "post",-->
            <!--success: function (result) {-->
                <!--for (var i in result) {-->
                    <!--var acc = result[i];-->
                    <!--console.log(acc);-->
                    <!--addNewTR(acc, i);-->
                <!--}-->
            <!--}-->
        <!--})-->
    <!--}-->

    $.ajax({
        url: "billpage",
        type: "type",
        success: function (result) {
            var roleList = result.list;
            var pages = result.pages;
            var pageNum = result.pageNum;
            var isFirstPage = result.isFirstPage;
            var isLastPage = result.isLastPage;
            for (var i in roleList) {
                var role = roleList[i];
                addNewTR(role);
            }
            $("#pages").append("<a id='up'>上一页</a>")

            for (var i = 1; i < pages+1; i++) {
                if (i == pageNum) {
                    $("#pages").append("<a id=" + i + "; class='current_page'; onclick='changePage(" + i + ")'>" + i + "</a>")
                } else {
                    $("#pages").append("<a id=" + i + "; onclick='changePage(" + i + ")'>" + i + "</a>")
                }
            }
            $("#pages").append("<a id='down'>下一页</a>")
            if (!isFirstPage) {
                var num = pageNum - 1;
                $("#up").attr("onclick", "changePage(" + num + ")");
            }
            if (!isLastPage) {
                var num = pageNum + 1;
                $("#down").attr("onclick", "changePage(" + num + ")");
            }
        }
    })


    function changePage(pagenum) {

        $.ajax({
            url: "billpage",
            type: "post",
            data: {
                pagenum: pagenum,
            },
            success: function (result) {
                $("#tbody").empty();
                $("#pages").empty();
                var roleList = result.list;
                var pages = result.pages;
                var pageNum = result.pageNum;
                var isFirstPage = result.isFirstPage;
                var isLastPage = result.isLastPage;
                for (var i in roleList) {
                    var role = roleList[i];
                    addNewTR(role);
                }
                $("#pages").append("<a id='up'>上一页</a>")

                for (var i = 1; i < pages+1; i++) {
                    if (i == pageNum) {
                        $("#pages").append("<a id=" + i + "; class='current_page'; onclick='changePage(" + i + ")'>" + i + "</a>")
                    } else {
                        $("#pages").append("<a id=" + i + "; onclick='changePage(" + i + ")'>" + i + "</a>")
                    }
                }
                $("#pages").append("<a id='down'>下一页</a>")
                if (!isFirstPage) {
                    var num = pageNum - 1;
                    $("#up").attr("onclick", "changePage(" + num + ")");
                }
                if (!isLastPage) {
                    var num = pageNum + 1;
                    $("#down").attr("onclick", "changePage(" + num + ")");
                }
            }
        })
    }

    function search() {

        $("#accountlist").empty();
        $.ajax({
            url:"searchaccount",
            type:"post",
            data:{
                years:$("#selYears").val(),
                name:$("#aname").val(),
                loginname:$("#cln").val(),
                cardid:$("#cardid").val(),
            },
            success: function (result) {
                console.log(result)
                var code = result.Code
                if (code == "0") {
                    alert(result.message)
                }
                var accountList = result.data;
                for (var i in accountList) {
                    var account = accountList[i];
                    addNewTR(account);
                }
            }
        })
    }
</script>

</html>
